// .message-fade-enter
// 	transform: translate(-50%,-100%)

.msgbox-fade-enter-active 
	animation: msgbox-fade-in .2s
	animation-fill-mode : forwards;

.msgbox-fade-leave-active 
	animation: msgbox-fade-out .2s
	animation-fill-mode : forwards;

.msgbox-fade-enter-active-x
	.item-animation
		animation: msgbox-fade-in .2s
		animation-fill-mode : forwards;

.msgbox-fade-leave-active-x
	.item-animation
		animation: msgbox-fade-out .2s
		animation-fill-mode : forwards;

.drawer-fade-to-left
	animation: drawer-fade-to-left .2s
	animation-fill-mode : forwards;
.drawer-fade-out-left
	animation: drawer-fade-to-left-out .2s
	animation-fill-mode : forwards;

.drawer-fade-to-right
	animation: drawer-fade-to-right .2s
	animation-fill-mode : forwards;
.drawer-fade-out-right
		animation: drawer-fade-to-right-out .2s
		animation-fill-mode : forwards;

.drawer-fade-to-top
	animation: drawer-fade-to-top .2s
	animation-fill-mode : forwards;
.drawer-fade-out-top
	animation: drawer-fade-to-top-out .2s
	animation-fill-mode : forwards;
		
.drawer-fade-to-bottom
	animation: drawer-fade-to-bottom .2s
	animation-fill-mode : forwards;
.drawer-fade-out-bottom
	animation: drawer-fade-to-bottom-out .2s
	animation-fill-mode : forwards;


@keyframes msgbox-fade-in 
	0% 
		transform: translate3d(0,-20px, 0);
		opacity: 0
	to 
		transform: translateZ(0, 0, 0);
		opacity: 1

@keyframes msgbox-fade-out 
	0% 
		transform: translateZ(0);
		opacity: 1
	to 
		transform: translate3d(0,-20px,0);
		opacity: 0

@keyframes drawer-fade-to-left
	0% 
		// transform: translateX(100%);			
		right: -100%
	to 
		// transform: translateX(0px);
		right: 0

@keyframes drawer-fade-to-left-out
	0% 
		transform: translateX(0px);
	to 
		transform: translateX(100%);

@keyframes drawer-fade-to-right
	0% 
		transform: translateX(-100%);
	to 
		transform: translateX(0px);

@keyframes drawer-fade-to-right-out
	0% 
		transform: translateX(0px);
	to 
		transform: translateX(-100%);

@keyframes drawer-fade-to-top
	0% 
		transform: translateY(100%);
	to 
		transform: translateY(0px);
@keyframes drawer-fade-to-top-out
	0% 
		transform: translateY(0px);
	to 
		transform: translateY(100%);
		
@keyframes drawer-fade-to-bottom
	0% 
		transform: translateY(-100%);
	to 
		transform: translateY(0px);
@keyframes drawer-fade-to-bottom-out
	0% 
		transform: translateY(0px);
	to 
		transform: translateY(-100%);